<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link type="text/css" rel="stylesheet" href="../../../easyui-1.11.3/themes/bootstrap/easyui.css">
        <link rel="stylesheet" type="text/css" href="../../../easyui-1.11.3/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="../../extend/themes/icon.css">
        <script type="text/javascript" src="../../jquery.min.js"></script>
        <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
        <script type="text/javascript" src="../../../easyui-1.11.3/locale/easyui-lang-zh_CN.js"></script>
        <script type="text/javascript" src="../../extend/jquery.easyui.toolbar.extend.js"></script>
        <script type="text/javascript" src="../../extend/jquery.json-2.4.min.js"></script>
        <!--<script type="text/javascript" src="../../jquery.easyui.extensions.min.js"></script>-->
        <link rel="stylesheet" type="text/css" href="../../syntaxhighlighter/styles/shCoreDefault.css">
        <script type="text/javascript" src="../../syntaxhighlighter/scripts/shCore.js"></script>
        <script type="text/javascript" src="../../syntaxhighlighter/scripts/shBrushJScript.js"></script>
        <script type="text/javascript" src="../../syntaxhighlighter/scripts/shBrushXml.js"></script>
        <script type="text/javascript">
            SyntaxHighlighter.config.tagName = "textarea";
            SyntaxHighlighter.all();
        </script>
        <script type="text/javascript">
            $(function(){
                $('#tb').toolbar({
                    data: [{
                        text: 'save',
                        iconCls: 'icon-save',
                        handler: function(){
                            alert('save')
                        }
                    },'-',{
                        text: 'Add',
                        iconCls: 'icon-add',
                        handler: function(){
                            alert('add')
                        }
                    }]
                });

                $('#tb2').toolbar({
                    url: 'toobar_data.json'
                });

            });

            function doSave(){
                alert('doSave')
            }

            function doAdd(){
                alert('doAdd');
            }
        </script>
    </head>
    <body>
        <!--<h3>Toolbar演示</h3>-->
        <!--<div id="tb"></div>-->



        <div class="easyui-tabs" data-options="fit: true, plain: true">
            <div data-options="title: 'Demo'">
                <h3>Toolbar演示</h3>
                <p>静态数据构建</p>
                <div id="tb" style="margin-bottom: 10px;"></div>

                <p>动态数据构建</p>
                <div id="tb2"></div>
            </div>
            <div data-options="title: 'Code'" style="font-size: 14px;">
                <p>javascript:</p>
                <textarea class="brush: js; highlight:[2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]">
                        $(function(){
                            $('#tb').toolbar({
                                data: [{
                                    text: 'save',
                                    iconCls: 'icon-save',
                                    handler: function(){
                                        alert('save')
                                    }
                                },'-',{
                                    text: 'Add',
                                    iconCls: 'icon-add',
                                    handler: function(){
                                        alert('add')
                                    }
                                }]
                            });


                            $('#tb2').toolbar({
                                url: 'toobar_data.json'
                            });
                        });
                </textarea>

                <p>html:</p>
                <textarea class="brush: html;">
                    <body>
                        <h3>Toolbar演示</h3>
                        <p>静态数据构建</p>
                        <div id="tb"></div>

                        <p>动态数据构建</p>
                        <div id="tb2"></div>
                    </body>
                </textarea>
            </div>
        </div>
    </body>
</html>